<template>
  <div>
    <navigate>图片浏览</navigate>
    <div class="browse_box">
      <div v-if="pictureList.length > 0" class="img_box">
        <van-swipe
          class="my-swipe"
          :autoplay="3000"
          indicator-color="white"
          @change="onSwipeChange"
        >
          <van-swipe-item v-for="(item, index) in pictureList" :key="index">
            <img :src="item.file" alt="" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div v-if="pictureList.length > 0" class="footer_info">
        <div class="info_tit">{{ pictureList[currentIndex].name }}</div>
        <div class="info_label">
          {{ pictureList[currentIndex].label.join("、 ") }}
        </div>
        <div class="info_desc">
          <span>分类：{{ pictureList[currentIndex].type_name }}</span>
          <span>序号：{{ currentIndex + 1 }}/{{ pictureList.length }}</span>
          <span
            >分辨率：{{ pictureList[currentIndex].width }}*{{
              pictureList[currentIndex].height
            }}</span
          >
        </div>
      </div>
      <div v-else>暂无图片数据</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pictureList: [],
      currentIndex: 0,
    };
  },
  created() {
    this.pictureList = JSON.parse(this.$route.query.pictureList);
  },
  methods: {
    onSwipeChange(index) {
      this.currentIndex = index;
    },
  },
};
</script>

<style lang="less" scoped>
.browse_box {
  height: 100vh;
  height: calc(100vh - 60px);
  background: #111111;
  color: #ffffff;
}
::v-deep.van-swipe {
  padding-top: 50%;
}
.van-swipe__track {
  img {
    width: 100%;
    height: 202.67px;
  }
}
.footer_info {
  position: fixed;
  bottom: 23.33px;
  padding: 0 12px;
  width: 100%;
  justify-content: space-between;
}
.info_tit {
  font-size: 15.33px;
  line-height: 15.33px;
}
.info_label {
  margin: 13px 0 23px;
}
.info_label,
.info_desc {
  opacity: 0.5;
  font-size: 12px;
  line-height: 12px;
}
.info_desc {
  display: flex;
  justify-content: space-between;
}
</style>
